<template>
  <!-- 我的订单中的商品展示 -->
  <div class="myOrderGoodBase">
    <!-- 顶部时间与订单状态 -->
    <div class="top">
      <div class="left">
        {{ item.create_time }}
      </div>
      <div class="right" style="color:red">
        {{ item.state_text }}
      </div>
    </div>
    <div class="main" v-for="item in goodsList" :key="item.order_goods_id">
      <div class="left">
        <img :src="item.goods_image">
      </div>
      <div class="middle">
        {{ item.goods_name }}
      </div>
      <div class="right">
        <p>￥{{ item.goods_price }}</p>
        <p>x {{ item.total_num }}</p>
      </div>
    </div>
    <div class="footer">
      <p style="margin-bottom:10px">共{{ goodsNum }}件商品,总金额￥{{ item.total_price }}</p>
      <button style="padding:5px 10px" @click="cancelOrder">申请取消</button>
    </div>
  </div>
</template>

<script>
import { cancelOrder } from '@/api/submitOrder.js'
export default {
  data () {
    return {
      goodsList: [],
      goodsNum: 0
    }
  },
  methods: {
    async cancelOrder () {
      const result = await cancelOrder(this.item.order_id)
      // this.$toast('订单取消成功')
      // this.$emit('input')
      console.log(result)
    }
  },
  props: {
    item: Object
  },
  created () {
    this.goodsList = this.item.goods
    // console.log(this.item.goods)
    this.goodsList.forEach(item => { this.goodsNum += item.total_num })
  }
}
</script>

<style scoped>
.myOrderGoodBase {
  margin:10px;
  padding:10px;
  border:1px solid pink;
}
.myOrderGoodBase .top {
  display:flex;
  justify-content:space-between;
}
/* 主要部分 */
.myOrderGoodBase .main {
  display:flex;
  margin-top:10px;
}
.myOrderGoodBase .main .left {
  flex:1;
}
.myOrderGoodBase .main img {
  width:100px;
  height:100px;
}
.myOrderGoodBase .main .middle {
  flex:2;
  height:38px;
  overflow:hidden;
  margin:0 10px;
}
.myOrderGoodBase .main .right {
  text-align:right;
  flex:1;
  opacity: 0.5;
}
.myOrderGoodBase .footer {
  text-align: right;

}
</style>
